<template>
    <div>
        <van-field
            v-model="City"
            is-link
            readonly
            :label="label"
            placeholder="请选择所在地区"
            @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
            <van-cascader
                title="请选择所在地区"
                :options="options"
                @close="show = false"
                @finish="onFinish"
            />
        </van-popup>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            show: false,
            City: "",
            cascaderValue: "",
        };
    },
    props:{
        options:{
            type:Array,
            default:function(){
                return []
            }
        },
        label:{
            type:String,
            default:""
        }
    },
    methods: {
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            this.show = false;
            this.City = selectedOptions
                .map((option) => option.text)
                .join("/");
            this.$emit("onValue",selectedOptions[1]) //拿取二級數據（城市）
        }
    },
};
</script>
 
<style>
</style>